<template>
    <el-button :size="size" :type="type" :icon="icon" :loading="loading" :disabled="!hasPerms(perms)"
        @click="handleClick">
        {{label}}
    </el-button>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
    name: 'KtButton',
    props: {
        label: {  // 按钮显示文本
            type: String,
            default: 'Button'
        },
        icon: {  // 按钮显示图标
            type: String,
            default: ''
        },
        size: {  // 按钮尺寸
            type: String,
            default: 'mini'
        },
        type: {  // 按钮类型
            type: String,
            default: null
        },
        loading: {  // 按钮加载标识
            type: Boolean,
            default: false
        },
        disabled: {  // 按钮是否禁用
            type: Boolean,
            default: false
        },
        perms: {  // 按钮权限标识，外部使用者传入
            type: String,
            default: null
        }
    },
    data () {
        return {
        }
    },
    methods: {
        handleClick: function () {
            // 按钮操作处理函数
            this.$emit('click', {})
        },
        hasPerms: function (perms) {
            // 根据权限标识和外部指示状态进行权限判断
            return hasPermission(perms) & !this.disabled
        }
    },
    mounted () {
    }
}
</script>

<style scoped>
</style>